<!-- 动态菜单 -->
<template>
  <div>
    <template v-for="(menu,index) in menuTree">
      <template  v-if='menu.subMenu!=null'>
        <!-- 有孩子 -->
        <el-submenu
          v-if='menu.subMenu.length!=0'
          :index="menu.menuUrl"
          :key="index"
        >
          <template slot="title">
            <i v-if="menu.menuIcon" :class="menu.menuIcon"></i>
            <span slot="title">{{ menu.menuName }}</span>
          </template>
          <!-- 调用自己-->
          <menuTree :menuTree='menu.subMenu'></menuTree>
        </el-submenu>
        <!-- 只有一层 -->
        <el-menu-item
          v-else
          :index='menu.menuUrl'
          :key='index'
        >
          <i v-if="menu.menuIcon" :class="menu.menuIcon"></i>
            <span slot="title">{{ menu.menuName }}</span>
        </el-menu-item>
      </template>

    </template>
  </div>
</template>

<script>
export default {
  name: 'menuTree',
  props: {
    menuTree: {
      type: Array,
      required: false
    }
  }
}
</script>

<style  scoped>

</style>
